import { Search, Settings, LogOut } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ChineseForum() {
  return (
    <div className="flex min-h-screen flex-col bg-gray-100">
      {/* Header */}
      <header className="sticky top-0 z-10 flex h-14 items-center justify-between border-b bg-white px-4 shadow-sm">
        <div className="flex items-center gap-8">
          <Link href="#" className="text-2xl font-bold text-gray-800">
            过早客
          </Link>
          <nav className="hidden md:flex">
            <ul className="flex items-center gap-6">
              <li>
                <Link href="#" className="text-gray-600 hover:text-gray-900">
                  首页
                </Link>
              </li>
              <li>
                <Link href="#" className="text-gray-600 hover:text-gray-900">
                  节点
                </Link>
              </li>
              <li>
                <Link href="#" className="text-gray-600 hover:text-gray-900">
                  成员
                </Link>
              </li>
              <li>
                <Link href="#" className="text-gray-600 hover:text-gray-900">
                  广告招放
                </Link>
              </li>
            </ul>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <div className="relative w-64">
            <Input
              type="search"
              placeholder="Search"
              className="h-9 w-full rounded-md border border-gray-300 pl-3 pr-10 text-sm"
            />
            <Search className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon">
              <Settings className="h-5 w-5" />
            </Button>
            <Button variant="ghost" size="icon">
              <LogOut className="h-5 w-5" />
            </Button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto flex flex-col gap-4 px-4 py-6 md:flex-row">
        {/* Left Content */}
        <div className="w-full md:w-3/4">
          {/* Category Tabs */}
          <Tabs defaultValue="popular" className="mb-6">
            <TabsList className="grid w-full grid-cols-5 bg-white">
              <TabsTrigger value="popular" className="data-[state=active]:bg-blue-500 data-[state=active]:text-white">
                默认排序
              </TabsTrigger>
              <TabsTrigger value="latest" className="data-[state=active]:bg-blue-500 data-[state=active]:text-white">
                最新话题
              </TabsTrigger>
              <TabsTrigger value="精华主题" className="data-[state=active]:bg-blue-500 data-[state=active]:text-white">
                精华主题
              </TabsTrigger>
              <TabsTrigger value="热门节点" className="data-[state=active]:bg-blue-500 data-[state=active]:text-white">
                热门节点
              </TabsTrigger>
              <TabsTrigger value="关注的人" className="data-[state=active]:bg-blue-500 data-[state=active]:text-white">
                关注的人
              </TabsTrigger>
            </TabsList>
          </Tabs>

          {/* Secondary Navigation */}
          <div className="mb-4 flex flex-wrap gap-2 rounded-md bg-white p-3">
            {["你的我的", "同城活动", "找工作", "IT技术", "金融财经", "创业创客", "城市建设", "法规投诉"].map(
              (item) => (
                <Link key={item} href="#" className="rounded-md px-3 py-1 text-sm text-gray-600 hover:bg-gray-100">
                  {item}
                </Link>
              ),
            )}
          </div>

          {/* Post List */}
          <div className="space-y-px">
            {[
              {
                title: "看了一眼，发现卖伟达显卡的炒家是现在实电脑的刚需啊",
                author: "IDjiang2",
                time: "1 分钟前",
                replies: 0,
              },
              {
                title: "武昌站东广场能进站吗",
                author: "marsx86",
                time: "1 分钟前",
                replies: 2,
              },
              {
                title: "Openai 把 Deepseek 比作Hw，道歉 Deepseek对五国的危险，竟争怎么可以这么没底线。",
                author: "tukema",
                time: "4 分钟前",
                replies: 47,
              },
              {
                title: "看到一个五十多岁得大爷住公司的工牌",
                author: "yihaby",
                time: "5 分钟前",
                replies: 37,
              },
              {
                title: "旅行者二号的天线是如何进进地球的?",
                author: "FlyRen9",
                time: "5 分钟前",
                replies: 0,
              },
              {
                title: "想再关山买个房子，预算在160左右的预算传东东湖103户型的能买到吗?",
                author: "muhu007",
                time: "7 分钟前",
                replies: 15,
              },
              {
                title: "这两天的股略情况啊？看不懂啊，是要起飞了？",
                author: "wyyy",
                time: "10 分钟前",
                replies: 9,
              },
              {
                title: "这波股市有亏钱的吗?",
                author: "iZurich",
                time: "12 分钟前",
                replies: 20,
              },
            ].map((post, index) => (
              <div key={index} className="flex items-start gap-3 border-b bg-white p-4 hover:bg-gray-50">
                <Avatar className="h-10 w-10 shrink-0">
                  <AvatarImage src={`/placeholder.svg?height=40&width=40`} />
                  <AvatarFallback>{post.author.charAt(0)}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <Link href="#" className="block text-base font-medium hover:text-blue-600">
                    {post.title}
                  </Link>
                  <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
                    <span className="text-gray-400">活跃者</span>
                    <span>•</span>
                    <Link href="#" className="hover:text-blue-500">
                      {post.author}
                    </Link>
                    <span>•</span>
                    <span>{post.time}</span>
                  </div>
                </div>
                {post.replies > 0 && (
                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs">
                    {post.replies}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Right Sidebar */}
        <div className="mt-6 w-full md:mt-0 md:w-1/4">
          {/* User Profile Card */}
          <div className="mb-4 overflow-hidden rounded-md bg-gray-800 text-white">
            <div className="p-4">
              <div className="flex items-center gap-2">
                <Avatar className="h-10 w-10 border">
                  <AvatarImage src="/placeholder.svg?height=40&width=40" />
                  <AvatarFallback>JF</AvatarFallback>
                </Avatar>
                <span className="text-lg font-medium">jff</span>
              </div>
              <div className="mt-4 grid grid-cols-4 text-center">
                <div className="flex flex-col">
                  <span className="text-lg font-medium">0</span>
                  <span className="text-xs text-gray-300">主题</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-lg font-medium">0</span>
                  <span className="text-xs text-gray-300">回复</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-lg font-medium">0</span>
                  <span className="text-xs text-gray-300">收藏</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-lg font-medium">0</span>
                  <span className="text-xs text-gray-300">信用</span>
                </div>
              </div>
            </div>
          </div>

          {/* Featured Image */}
          <div className="mb-4 overflow-hidden rounded-md">
            <Image
              src="/placeholder.svg?height=200&width=300"
              alt="Featured image"
              width={300}
              height={200}
              className="h-auto w-full object-cover"
            />
          </div>

          {/* Today's Hot Topics */}
          <div className="rounded-md bg-white p-4">
            <h3 className="mb-3 font-medium">今日热议</h3>
            <div className="space-y-4">
              {[
                "微信品牌营销 15款深夜鸡汤，山寨要涨价了吗。",
                "居然有不起新能和的兄弟，可以去相亲上看看电影子老婆，期待你在评论区感地battle一下",
                "没想到教育资源差距这么大",
                "35岁文科生，家在武汉，怎考考了个副教授 我还是不去了",
                "武汉山姆超市商品质量有那么好吗？为啥大家非买这么多卡车子来",
                "东本有点酷炫啊",
                "大家怎么处理父母的经济需求。",
              ].map((topic, index) => (
                <div key={index} className="flex gap-3">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src={`/placeholder.svg?height=32&width=32`} />
                    <AvatarFallback>U</AvatarFallback>
                  </Avatar>
                  <Link href="#" className="text-sm hover:text-blue-600">
                    {topic}
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}